<script setup lang="ts">
import type { RouteNamedMap } from 'vue-router/auto-routes'
//* 注意: 这里是按照时间倒序排列
const list: {
  name: string
  path: Exclude<keyof RouteNamedMap, '/plays/'>
  time: string
}[] = [{
  name: '表达添加行',
  path: '/plays/add-item-form',
  time: '2024/3/23',
}, {
  name: '共享ref',
  path: '/plays/shared-ref',
  time: '2024/3/18',
}, {
  name: '选择控制表单',
  path: '/plays/select-ctrl-table',
  time: '2024/3/17',
}]
// 为了解决可能的乱序,使用了排序
list.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
list.push({
  name: 'TODO',
  path: '/plays/todo',
  time: '???',
})
</script>

<template>
  <div flex justify-center>
    <ElTimeline max-w-600px>
      <ElTimelineItem v-for="item of list" :key="item.time" :timestamp="item.time" placement="top">
        <ElCard>
          <RouterLink :to="item.path" class="cursor-pointer text-blue-500 underline">
            <strong text-lg>{{ item.name }}</strong>
          </RouterLink>
          <p>post {{ item.time }}</p>
        </ElCard>
      </ElTimelineItem>
    </ElTimeline>
  </div>
</template>
